<template>
<!--  下层表格-->
  <el-row>
    <el-col :span="24">
        <el-table
            :data="getData"
            style="width: 100%"
            height="300"
            header-cell-style="background:#f8f8f9;color:#535a6c">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="教师编号" width="120" />
          <el-table-column prop="teacherId" label="教师号" width="150" />
          <el-table-column prop="teacherName" label="教师姓名" width="180" />
          <el-table-column prop="teacherSex" label="教师性别" sortable>
            <template #default="scope">
              <teacherSex :teacherSex="scope.row.teacherSex"/>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="教师状态">
            <template #default="scope">
              <StatusTag :status="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column prop="userId" label="用户名" width="150">
            <template #default="scope">
              <UserNameById :id="scope.row.userId"></UserNameById>
            </template>
          </el-table-column>
          <el-table-column fixed="right" prop="operation" label="操作" width="220">
            <template #default>
              <el-button-group>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="编辑此教师"
                    placement="top"
                >
                  <el-button type="primary" :icon="Edit" size="small"></el-button>
                </el-tooltip>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="删除此教师"
                    placement="top"
                >
                  <el-button :icon="Delete" type="danger" size="small"></el-button>
                </el-tooltip>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="停用此教师"
                    placement="top"
                >
                  <el-button type="warning" size="small" :icon="Remove"></el-button>
                </el-tooltip>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
    </el-col>
  </el-row>

</template>

<script setup>
import {Remove,Edit,Delete} from "@element-plus/icons-vue";
import StatusTag from "@/components/table/StatusTag";
import TeacherSex from "@/components/table/TeacherSex";
import UserNameById from "@/components/user/UserNameById";
</script>

<script>
import {selectAllTeacher} from "@/api/teacher";
export default {
  name: "Down",
  data() {
    return {
      data:''
    }
  },
  mounted() {
    //vue组件初始化
    this.getTeacher();
  },
  methods:{
    async getTeacher() {
      const t =await selectAllTeacher();
      this.data = t.data.data
    }
  },
  computed:{
    getData() {
      return this.data;
    }
  }
}
</script>

<style scoped>

</style>